<div id="projectAdmin">
    <app-zone header="{{ 'project_rename_title' | translate }}">
        <app-zone-content class="bottom">
            <form class="ui form" (ngSubmit)="onSubmitProjectUpdate()" #projectUpdateFrom="ngForm">
                <div class="fields">
                    <div class="seven wide field">
                        <input type="text" name="formProjectUpdateName"
                               placeholder="{{ 'project_name' | translate}}"
                               [(ngModel)]="project.name"
                               [disabled]="loading"
                               required
                               #formProjectUpdateName="ngModel">
                        <div *ngIf="formProjectUpdateName.invalid && !formProjectUpdateName.pristine"
                             class="ui error message">
                            <p>{{'project_update_name_error' | translate}}</p>
                        </div>
                    </div>
                    <div class="nine wide right aligned field">
                        <button class="ui green button" name="btnrename" [class.loading]="loading" [disabled]="projectUpdateFrom.invalid">{{ 'btn_rename' | translate }}</button>
                    </div>
                </div>
            </form>
            <app-warning-modal [title]="_translate.instant('warning_modal_title')" [msg]="_translate.instant('warning_modal_body')" (event)="onSubmitProjectUpdate(true)" #updateWarning></app-warning-modal>
        </app-zone-content>
    </app-zone>
    <app-zone header="{{ 'project_description' | translate }}">
        <app-zone-content class="bottom">
            <form class="ui form" (ngSubmit)="onSubmitProjectUpdate()" #projectUpdateFrom="ngForm">
                <div class="fields">
                    <div class="fourteen wide field">
                        <textarea name="formProjectUpdateDescription"
                               placeholder="{{ 'project_description' | translate}}"
                               [(ngModel)]="project.description"
                               [disabled]="loading"
                               #formProjectUpdateDescription="ngModel">
                        </textarea>
                    </div>
                    <div class="two wide right aligned field">
                        <button class="ui green button" name="btnrename" [class.loading]="loading" [disabled]="projectUpdateFrom.invalid">{{ 'btn_save' | translate }}</button>
                    </div>
                </div>
            </form>
            <app-warning-modal [title]="_translate.instant('warning_modal_title')" [msg]="_translate.instant('warning_modal_body')" (event)="onSubmitProjectUpdate(true)" #updateWarning></app-warning-modal>
        </app-zone-content>
    </app-zone>
    <app-zone header="{{ 'project_icon' | translate }}">
        <app-zone-content class="bottom">
            <form class="ui form">
                <div class="fields">
                    <div class="fourteen wide field center aligned" *ngIf="!fileTooLarge">
                        <div>
                            <img class="proj-icon" [src]="project.icon" alt="project icon" *ngIf="project.icon">
                        </div>
                        <app-upload-button accept=".png,.jpg,.jpeg" image="true" (event)="fileEvent($event)">
                        </app-upload-button>
                    </div>
                    <div class="ui fourteen wide red message field center aligned" *ngIf="fileTooLarge" [textContent]="'common_file_too_large' | translate"></div>
                    <div class="two wide right aligned field">
                        <button class="ui green button" [class.loading]="loading" name="updateiconButton" (click)="onSubmitProjectUpdate()" [disabled]="loading">{{ 'btn_save' | translate }}
                        </button>
                    </div>
                </div>
            </form>
        </app-zone-content>
    </app-zone>
    <app-zone>
        <h4 class="ui top attached segment">
            <app-warning-mark-list [warnings]="missingWarnings"></app-warning-mark-list>
            {{ 'project_repoman_title' | translate }}
        </h4>
        <app-zone-content class="bottom">
            <app-repomanager-form [project]="project"></app-repomanager-form>
            <app-project-repomanager-list *ngIf="project.vcs_servers && project.vcs_servers.length > 0"
                                          [project]="project" [reposmanagers]="project.vcs_servers"
                                          [warnings]="unusedWarning"
            ></app-project-repomanager-list>
        </app-zone-content>
    </app-zone>
    <app-zone header="{{ 'danger_zone' | translate }}" headerClass="red inverted">
        <app-zone-content class="bottom">
            <div class="ui grid">
                <div class="eight wide column">
                    <div class="title">{{ 'project_delete_label' | translate}}</div>
                    <div class="description">{{ 'project_delete_description' | translate}}</div>
                </div>
                <div class="eight wide right aligned column">
                    <app-delete-button [loading]="loading" (event)="deleteProject()"></app-delete-button>
                </div>
            </div>
        </app-zone-content>
    </app-zone>
</div>
